<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="axios.min.js"></script>
</head>

<body>
    <div id="app">{{a}}</div>
    <script type="text/javascript">
        var data = { a: 1 };
        var vm = new Vue({
            el: "#app",
            data: data
        });
        vm.$watch('a', function (newVal, oldVal) {
            a
            console.log(newVal, oldVal);
        })
        vm.$data.a = 'test....';
        axios.get("http://localhost:8080/hello", data)
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.error(err);
            });
        var nonce = '';
        var nonceLength = 10;
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P');
        for (var i = 0; i < nonceLength; i++) {
            var index = Math.floor(Math.random() * 61);
            nonce += random[index];
        }
        var params = { "name": "工委平", "age": "19" };
        var timestamp = Date.parse(new Date());
        axios.post("http://localhost:8080/myvue", params, { headers: { 'timestamp': timestamp, 'nonce': nonce } })
            .then(res => {
                console.log(res);
                console.log("timestamp is " + timestamp);
                console.log("i am code" + nonce);
            })
            .catch(err => {
                console.error(err);
            })
    </script>
</body>

</html>